@extends('main')
@section('title')
Profile
@endsection
@section('content')
<div class="frm_signup">
    <p>Edit profile .</p>
 
	{{ Form::open(array('route' => 'edit.profile','id' => 'form_login', 'files' => true)) }}
	{{ $errors->first('username') }} <br />
	{{ $errors->first('password') }}<br />
	<?php if(isset($error1)) echo $error1; ?><br />
	<input type="text" name="firstName" value='<?php if(Input::old("firstName") == null) echo $user->firstname; 	else echo Input::old("firstName"); ?>' 	placeholder="firstName"></input><br>
	<input type="text" name="lastName" 	value='<?php if(Input::old("lastName") 	== null) echo $user->lastname; 	else echo Input::old("lastName"); ?>' 	placeholder="lastName"></input><br>
	<input type="text" name="nickname" 	value='<?php if(Input::old("nickname") 	== null) echo $user->nickname; 						else echo Input::old("nickname"); ?>' 	placeholder="nickname"></input><br>
	<input type="text" name="email" 	value='<?php if(Input::old("email") 	== null) echo $user->email; 						else echo Input::old("email"); ?>' 		placeholder="email"></input><br>
	<input type="text" name="mobile" 	value='<?php if(Input::old("mobile") 	== null) echo $user->mobile; 						else echo Input::old("mobile"); ?>' 	placeholder="mobile"></input><br>
	<input type="text" name="username" 	value='<?php if(Input::old("username") 	== null) echo $user->username; 						else echo Input::old("username"); ?>' 	placeholder="userName"></input><br>

	<div id="container_photo" class="picture-element-principal" >
		{{ Form::file('file', ['class' => 'input_img'] ) }}
		<input type="hidden" class="hide" name="valueImg" />
	</div>
	<div class="modal fade">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title">crop avatar</h4>
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        <button type="button" class="btn btn-primary" onclick="getDataCrop()">Save changes</button>
	      </div>
	      <div class="modal-body">
	      </div>
	      <div class="modal-footer">
	        
	      </div>
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

	{{ Form::submit('signup',array('class' => 'btn btn_login' )); }}<br />
	{{ Form::close() }}

	<script>
	  	$(function() {
		    $( "#datepicker" ).datepicker({
		      showOn: "button",
		      buttonImage: "images/calendar.gif",
		      buttonImageOnly: true,
		      buttonText: "Select date",
		      dateFormat: "dd-mm-yy"
		    });
	  	});
	  	$('.input_img').fileupload({
		    url: "http://localhost/shaphira/uploadImg",
		    add: function (e, data) {
		    	var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
		    	var uploadErrors = [];
		        if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
		            uploadErrors.push('Not an accepted file type');
		        }
		        // file size < 5MB
		        if(data.originalFiles[0]['size'].length && data.originalFiles[0]['size'] > 5000000) {
		            uploadErrors.push('Filesize is too big');
		        }
		        if(uploadErrors.length > 0) {
		            alert(uploadErrors.join("\n"));
		        } else {
			        data.submit().success( function (result, textStatus, jqXHR) {
			        	$('.hide').val(result);
			        	var url = '{{ URL::asset("public") }}' +"/"+ result;
			        	$('#container_photo').css('background','url('+url+') no-repeat 50% 50%');
			        	$( ".modal-body" ).html('<img class="abc" src="'+url+'"></img>');
			        	$('.modal').modal('show');
			        	$('.modal').on('shown.bs.modal', function () {
			        		console.log('asdasd');
			        		$(".modal-body > img.abc").cropper({
							  aspectRatio: 1.618,
							  autoCrop: true,
							  dragCrop: true,
							  modal : true,
							  dashed : false,
							  movable : true,
							  resizable : true,
							  zoomable : false,
							  multiple : false,
							  done: function(data) {
							    // Output the result data for cropping image.
							  }
							});
			        	});
			        }).error( function (jqXHR, textStatus, errorThrown) {
        				console.log(textStatus);
        			});
			    }
		    },
		    progressall: function (e, data) {
		       /* var progress = parseInt(data.loaded / data.total * 100, 10);
		        $('#progress .bar').css(
		            'width',
		            progress + '%'
		        );*/
		    },
		    done: function (e, data) {
		    	console.log('asds');
		        $.each(data.files, function (index, file) {
		            /**/
		        });
		    }
		});
		function getDataCrop() {
			var data = $(".modal-body > img.abc").cropper("getData");
			$.ajax({
			  type: "POST",
			  url: "http://localhost/shaphira/cropImg",
			  data: { url:$('.hide').val() ,x: data.x, y: data.y, width: data.width, height: data.height }
			})
			  .done(function( msg ) {
			    $('#container_photo').css('background','url('+msg+') no-repeat');
			    $('.modal').modal('hide');
			  });
		}
  	</script>
  	
</div>
@endsection